<template>
  <div class="store-details">
    <div class="top">
      <img src="@/assets/pic5.png" class="top-img" alt="">
      <p class="title">天赋系统儿童脑力拓展训练中心</p>
    </div>
    <div class="section">
      <div class="flex-section">        
        <img src="@/assets/mendian3.png" alt="">
        <div class="tel-div">
          <p class="kefu tip">客服电话</p>
          <p class="tel">TEL：0090-2458666</p>
          <p class="time">周一至周五，10:00-19:00</p>
        </div>
      </div>
      <div class="flex-section">        
        <img src="@/assets/mendian4.png" alt="">
        <div class="tel-div">
          <p class="kefu tip">门店地点</p>
          <p class="address-details"><em>860m</em><span>广州市天河区太古汇商业大街道北门商业楼355室</span></p>
        </div>
      </div>
    </div>
    <div class="section">
      <p class="title">门店信息</p>
      <div class="cons">
        <img src="@/assets/pic5.png" alt="">
        <p>智保天赋教育是广州景晟教育科技有限公司旗下品牌，致力于家庭教育新理念、新技术的实践和推广。</p>
        <p>2018年，慧动未来与智晟电子强强联合，在广州两大地标之一的广州圆大厦，共同合作投资成立了广州景晟教育科技有限公司。</p>
      </div>
    </div>
    <div class="section">
      <p class="title glasses-store-title">附属眼镜店</p>
      <div class="flex-div">        
        <img src="@/assets/mendian4.png" alt="">
        <div class="tel-div">
          <p class="store-title">广州视明配光中心 </p>
          <p class="store-address">广州市番禺区大石南门亭正街118号</p>
          <p class="store-tel">020-3348 6974</p>
        </div>
      </div>
      <div class="flex-div">        
        <img src="@/assets/mendian4.png" alt="">
        <div class="tel-div">
          <p class="store-title">广州视明配光中心 </p>
          <p class="store-address">广州市番禺区大石南门亭正街118号</p>
          <p class="store-tel">020-3348 6974</p>
        </div>
      </div>
      <div class="flex-div">        
        <img src="@/assets/mendian4.png" alt="">
        <div class="tel-div">
          <p class="store-title">广州视明配光中心 </p>
          <p class="store-address">广州市番禺区大石南门亭正街118号</p>
          <p class="store-tel">020-3348 6974</p>
        </div>
      </div>
    </div>
    <div class="btn" @click="router({path: './appoint'})">立即预约</div>
    <!-- <div class="btn is-appointe">
      <p class="btn-time">2018年11月21日 19:30</p>
      <p class="btn-tip">您已预约该门店，请按时前往，到店后请咨询店员提供服务</p>
    </div> -->
  </div>
</template>

<script>

  export default {
    components: {
    },
    data () {
      return {
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style lang="stylus" scoped>
.store-details
  width 100vw
  min-height 100vh
  background-color #f5f5f5
  margin-bottom 6rem
  .top
    background-color #fff
    .title
      font-size 1.7rem
      font-weight bold
      line-height 5.5rem
      color #333
      margin 0 1.5rem
      border-bottom 1px solid #e6e6e6
  .section
    margin-bottom 1rem
    background-color #fff
    padding 0 1.5rem
    margin-bottom 1rem
    .title
      line-height 5rem
      height 5rem
      color #333
      font-size 1.8rem
      font-weight bold
    .flex-section
      position relative
      border-bottom 1px solid #e6e6e6
      padding-top 3rem
      &:last-child
        border none
      img
        width auto
        height 2.2rem
        position absolute
        left 0
        top 3rem
      .tel-div
        padding-left 3.5rem
        padding-bottom 3rem
        .tip
          font-size 1.5rem
          color #333
          margin-bottom 1.5rem
        p
          color #666
          font-size 1.2rem
          line-height 1.3rem
          height 1.3rem
          margin-bottom .5rem
        .address-details
          font-size 1.2rem
          color #999
          line-height 1.6rem
          height auto
          overflow hidden
          em
            float left
          span
            margin-left 1rem
            padding-left 1rem
            position relative
            float right    
            width calc(100% - 5.3rem)
            &:after
              content ''
              position absolute
              left 0
              top .3rem
              height 1rem
              border-left 1px solid #e6e6e6
    .cons
      padding-bottom 1rem
      img
        margin-bottom 2rem
      p
        font-size 1.3rem
        color #333
        margin-bottom 1rem
        line-height 2.2rem
    .glasses-store-title
      line-height 2rem
      padding-top 3rem
      height 2rem
      padding-bottom 1rem
    .flex-div
      display flex
      padding-top 2rem
      img
        width 2rem
        margin-right 1.5rem
        max-width 2rem
        height 2rem
      .tel-div
        border-bottom 1px solid #e6e6e6
        width 100%
        .store-title
          line-height 2.2rem
          font-size 1.6rem
          color #333
        .store-address
          font-size 1.2rem
          color #999
          line-height 2.7rem
        .store-tel
          font-size 1.3rem
          border-bottom 1px solid #43A047
          display inline-block
          padding 0 .2rem
          color #43A047
          margin-top 1rem
          margin-bottom 2rem
  .btn
    background-color #43A047
    color #fff
    line-height 5rem
    height 5rem
    text-align center
    font-size 1.8rem
    font-weight bold
    display block
    margin 0 1rem
    position fixed
    bottom 1rem
    width calc(100% - 2rem)
    border-radius .4rem
  .is-appointe
    line-height 2rem
    padding-top .5rem
    box-sizing border-box
    background-color #FE9700
    .btn-time
      font-size 1.7rem
    .btn-tip
      font-weight 400
      font-size 1.2rem
</style>
